<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素对象的属性</title>
    <style type="text/css">
        div#onediv{
            height: 1000px;
            width: 1000px;
            background-color: blue;
            padding: 10px;
            border:1px solid red;
            margin:13px;
        }
    </style>
    
</head>
<body>

    <div id="onediv"  data-hao="hao"  class="one two three">
        <p id="onep">第一个p</p>
        <p id="twop">第二个p</p>
        <p id="threep">第三个p</p>
    </div>
    
</body>
<script type="text/javascript">
    var div=document.getElementById("onediv");
    var nodename=div.nodeName;
    console.log("nodename="+nodename);
    var nodetype=div.nodeType;
    console.log("nodetype="+nodetype);
    var childnodes=div.childNodes;
    console.log("childnodes="+childnodes);
    var childelementnum=div.childElementCount;
    console.log("childelementnum="+childelementnum);
    var children=div.children;
    console.log("children="+children);
    var firstchild=div.firstChild;
    console.log("firstchild="+firstchild);
    var firstelement=div.firstElementChild;
    console.log("firstelement="+firstelement);
    var lastchild=div.lastChild;
    console.log("lastchild="+lastchild);
    var lastelementchild=div.lastElementChild;
    console.log("lastelementchild="+lastelementchild);
    var divoffsetparent=div.offsetParent;
    console.log("divoffsetparent="+divoffsetparent);
    //返回最靠近当前元素的、并且 CSS 的position属性不等于static的上层元素。

    var clientheight=div.clientHeight;//内容和内边距高度不包括border和margin
    console.log("clientheight="+clientheight);
    var clientwidth=div.clientWidth;//内容和内边距宽度
    console.log("clientwidth="+clientwidth);
    var clientleft=div.clientLeft;
    console.log("clientleft="+clientleft);//左边border宽度，不包括外边距和内边距
    var clienttop=div.clientTop;
    console.log("clienttop="+clienttop);//顶部border宽度
    var offsetheight=div.offsetHeight;
    console.log("offsetheight="+offsetheight);//内容+内边距+border高度
    var offsetwidth=div.offsetWidth;
    console.log("offsetwidth="+offsetwidth);//内容+内边距+border宽度
    var offsettop=div.offsetTop;// 相对于offsetparent节点的顶部偏移,margin找大的
    //body的顶部margin和div的顶部margin取大的
    console.log("offsettop="+offsettop);
    var offsetleft=div.offsetLeft;//相对于offsetparent节点的左边偏移margin相加
    //body和div左边的margin相加
    console.log("offsetleft="+offsetleft);
    var divscrollheight=div.scrollHeight;//内容+内边距宽度
    console.log("divscrollheight="+divscrollheight);
    var divscrollwidth=div.scrollWidth;//内容+内边距宽度
    console.log("divscrollwidth="+divscrollwidth);
    var divscrolltop=div.scrollTop;//滚动条向左滚动的距离
    console.log("divscrolltop="+divscrolltop);
    var divscrollleft=div.scrollLeft;//滚动条向右滚动的距离
    console.log("divscrollleft="+divscrollleft);

    var attributes=div.attributes;
    console.log("attributes="+attributes);
    var dataset=div.dataset;
    console.log("dataset="+dataset);
    console.log("datasethao="+dataset.hao);
    var divstyle=div.style;
    console.log("divstyle="+divstyle);
    var divid=div.id;
    console.log("divid="+divid);
    var divclasslist=div.classList;
    console.log("divclasslist="+divclasslist);
    var divclassname=div.className;
    console.log("divclassname="+divclassname);
    

    var divouthtml=div.outerHTML;
    console.log("divouthtml="+divouthtml);
    var divinnerhtml=div.innerHTML;
    console.log("divinnerhtml="+divinnerhtml);
    var divtextcontent=div.textContent;
    console.log("divtextcontent="+divtextcontent);
    var divinnertext=div.innerText;
    console.log("divinnertext="+divinnertext);
    var divouttext=div.outerText;
    console.log("divouttext="+divouttext);
    var divtagname=div.tagName;
    console.log("divtagname="+divtagname);

    var firstp=firstchild.nextSibling;
    console.log("firstp="+firstp);
    var secondp=firstp.nextElementSibling;
    console.log("secondp="+secondp);
    var againfirstp=secondp.previousElementSibling;
    console.log("againfirstp="+againfirstp);
    var anotherfirstp=firstp.nextSibling.previousSibling;
    console.log("anotherfirstp="+anotherfirstp);

    console.log("hiddern="+div.hidden);//div的隐藏属性
    console.log("内容是否可以编辑"+div.isContentEditable);

    

    
</script>

</html>